<template>
	<div class="sys-org-container">
		

			<div style="width: 100%;">
				<screeningCondition :inquireInfo="state.inquireInfo" @getChildren="getData"></screeningCondition>
			</div>

				<el-card class="full-table" shadow="hover" style="margin-top: 5px">
					<el-table :data="state.orgData" v-loading="state.loading" row-key="id" default-expand-all
						:tree-props="{ children: 'children', hasChildren: 'hasChildren' }" border highlight-current-row
						@current-change="handleRowChange" :header-cell-style="{
							background: 'var(--el-color-primary)',
							height: '55px', color: '#fff', border: '1px solid #fff', fontWeight: 'bold', fontSize: '13px'
						}" :cell-style="{ padding: '2px' }" class="el-table">
						<el-table-column type="index" label="序号" align="center"></el-table-column>
						<el-table-column prop="TaskNo" label="任务编号" align="center" show-overflow-tooltip />



						<el-table-column prop="modelNo" label="模板号" header-align="center" show-overflow-tooltip />
						<el-table-column prop="source" label="任务来源" header-align="center" show-overflow-tooltip />

						<el-table-column prop="AGVNo" label="设备编号" align="center" show-overflow-tooltip>
							<template v-slot="scope">
								<span v-if="scope.row.AGVNo">{{ scope.row.AGVNo }}</span>
								<span v-else>暂无设备编号</span>
							</template>
						</el-table-column>

						<el-table-column prop="AssetNumber" label="agv序列号" header-align="center" show-overflow-tooltip />
					
						<el-table-column prop="TaskState" label="任务状态" align="center" show-overflow-tooltip>
							<template v-slot="scope">
								{{ getCorrespondStatus(scope.row.TaskState) }}
							</template>

						</el-table-column>
						<el-table-column prop="subTaskSeq" label="子任务序列" header-align="center" align="center"
							show-overflow-tooltip />
							
							<el-table-column prop="subTaskState" label="子任务状态" align="center" show-overflow-tooltip>
							<template v-slot="scope">
								{{ getCorrespondStatus(scope.row.subTaskState) }}
							</template>

						</el-table-column>
						<el-table-column prop="Message" label="报错信息" header-align="center" align="center"
							show-overflow-tooltip />
						<el-table-column label="操作" fixed="right" width="100" align="center" show-overflow-tooltip>
							<template #default="scope">
								<el-button size="small" text type="primary" @click="cancelTask(scope.row)"
									v-if="scope.row.taskState == 9 || scope.row.taskState == 6">
									取消任务 </el-button>
								<!-- <el-button icon="ele-Delete" size="small" text type="danger" @click="delOrg(scope.row)" v-auth="'sysOrg:delete'"> 删除 </el-button> -->
							</template>
						</el-table-column>
					</el-table>
					<el-pagination v-model:current-page="state.queryParams.page"
						v-model:page-size="state.queryParams.pageSize" :page-sizes="[20, 30, 40, 50]"
						layout="->,total, sizes, prev, pager, next, jumper" :total="state.total"
						@size-change="handleSizeChange" @current-change="handleCurrentChange" :small="true" />
				</el-card>


		<el-drawer v-model="addDrawer" title="新增任务" :append-to-body="true" size="30%">
			<el-form :model="state.ruleForm2" ref="ruleFormRef" label-width="auto" class="fl">
				<el-form-item label="订单号">
					<el-input v-model="state.ruleForm2.taskNo" placeholder="订单号" clearable />
				</el-form-item>
				<!-- 请求对应编号的名称 -->
				<el-form-item label="任务名称">
					<el-input v-model="state.ruleForm2.taskName" placeholder="任务名称" clearable />
				</el-form-item>
				<el-form-item label="模板" prop="modelNo"
					:rules="[{ required: true, message: '点位数不能为空', trigger: 'blur' }]">
					<el-select v-model="state.ruleForm2.modelNo" filterable clearable class="w100"
						@change="handlechange">
						<el-option v-for="item in state.modelNoList" :key="item" :label="item"
							:value="item"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="设备编号">
					<el-input v-model="state.ruleForm2.agvNo" placeholder="设备编号" clearable />
				</el-form-item>

				<el-form-item label="优先级">
					<el-input v-model="state.ruleForm2.priority" placeholder="优先级" clearable />
				</el-form-item>
				<el-form-item label="路径" prop="positions"
					:rules="[{ required: true, message: '任务点不能为空', trigger: 'blur' }]">
					<el-input v-model="state.ruleForm2.positions" placeholder="任务点请按英文逗号分隔" clearable />
				</el-form-item>
			</el-form>
		</el-drawer>

	</div>
</template>
<script lang="ts" setup name="Warehouse">
import { onMounted, reactive, ref, toRaw } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { getAPI } from '/@/utils/axios-utils';
import screeningCondition from '/@/views/tools/screeningCondition.vue'

import { WmsApi } from '/@/api/wh';
import { SysDictDataApi } from '/@/api-services/api';

const addDrawer = ref(false);
const state = reactive({
	loading: false,
	orgData: [],
	queryParams: {
		taskNo: '',
		taskState: undefined,
		page: 1,
		pageSize: 20,
	},
	dataonLineListSelections: [],
	ruleForm2: {
		id: 0,
		taskNo: "",
		taskName: "",
		agvNo: "",
		taskState: "",
		priority: 6,
		modelNo: "",
		source: "",
		positions: ""
	},
	modelNoList: [],
	total: 0,
	inquireInfo: [
		{
			label: "订单号",
			value: "",
			key: "taskNo",
			options: [],
			type: 'input'

		},
		{
			label: "设备编号",
			value: "",
			key: "agvNo",
			options: [],
			type: 'input'

		},

		{
			label: "运行状态",
			value: "",
			key: "taskState",
			options: [],
			type: 'select'
		},
	],
	//agv字典状态
	statusLists: [],
	//保留用户输入的筛选框内的请求条件
	value: {}
});
onMounted(async () => {
	let resDicData = await getAPI(SysDictDataApi).apiSysDictDataDataListCodeGet('AGVstatus_type');
	state.statusLists = resDicData.data.result;

	// 箭头函数之后的()表示返回的是一个对象字面量
	state.inquireInfo[2].options = state.statusLists.map(item => ({
		value: Number(item.code),
		label: item.value
	}))
	
	// return {  
    //     label: item.value, // 将 value 字段重命名为 label  
    //     code: item.code    // 保持 code 字段不变  
    // };
	getData(state.queryParams);
	//请求接口获得模态框中类型列表的数据，赋值给orgTypeList=orgData
})

const currentRow = ref()
const handleSwitch = (row) => {

}
const getCorrespondStatus = (v) => {
	const item = state.statusLists.filter(item => item.code == v);
	return item[0] ? item[0].value : null;
	// console.log(a);
	// return a[0].value
}
// // 查询操作
const getData = (value) => {
console.log(value);

	state.value = value
	let params = {
		page: state.queryParams.page,
		pagesize: state.queryParams.pageSize,
		status: value.taskState,
		taskNo: value.taskNo,
		agvNo: value.agvNo
		// orderId: value.orderId,
		// state: value.state
	}
	WmsApi().agvPagePost(params)
		.then(function (res) {
			state.orgData = res.data.result.items;
			state.total = res.data.result.total;
		})
		.catch(function (error) {
			console.log(error);
		});
};

const selectionLineChangeHandle = (val) => {
	state.dataonLineListSelections = val
}
const handleToCreateTask = async () => {

	let params = {
		'modelNo': state.ruleForm2.modelNo,
		'taskDetail': [{
			'positions': state.ruleForm2.positions
		}]
	};

	await WmsApi().agvPageAdd(params)

		.then(function (response) {

			ElMessage.success('任务下达成功')
			getData(state.queryParams);
		})
		.catch(function (error) {
			console.log(error);
		});

}


// 打开新增页面
const openAddOrg = () => {
	state.ruleForm2 = {};
	addDrawer.value = true;
};
const submit = () => {

}
const timeConsuming = (a, b) => {
	var d = new Date(a).getTime();
	var e = new Date(b).getTime();
	var result = (d - e) / 1000 / 60


	return result;
}
const handlechange = (val) => {
	state.ruleForm2.modelNo = val;
	state.ruleForm2.taskName = val;
}
const cancelTask = async (row) => {
	ElMessageBox.confirm(`确定取消该任务吗：【${row.taskName}】?`, '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(async () => {
			await WmsApi().agvCancel({
				"taskNo": row.taskNo
			})
				.then(function (res) {
					ElMessage.success('取消成功');
					getData(state.queryParams);
				})
		})
		.catch(() => {
			ElMessage({
				type: 'info',
				message: '取消取消任务',
			})
		});
}

const handleSizeChange = (val) => {
	state.queryParams.PageSize = val;
	state.queryParams.taskNo = state.value.taskNo;
	state.queryParams.taskState = state.value.taskState;
	state.queryParams.agvNo = state.value.agvNo;

	getData(state.queryParams);
};
const handleCurrentChange = (newVal) => {

	state.queryParams.PageNo = newVal;
	state.queryParams.taskNo = state.value.taskNo;
	state.queryParams.taskState = state.value.taskState;
	state.queryParams.agvNo = state.value.agvNo;

	getData(state.queryParams);
};
const handleRowChange = (val) => {
	currentRow.value = val;
}

</script>
<style lang="scss" scoped>
.lie .el-form-item {
	margin-bottom: 30px;
	font-size: 16px;
}

.fl {

	width: 60%;
	margin: 20px 80px;

}

.hang {
	display: flex;
}

.radius {
	height: 22px;
	width: 164.75px;
	border: 1px solid var(--el-border-color);
	border-radius: 5px;
	background-color: #ddd;
	padding-left: 5px;
	padding-top: -4px;
	color: #afabb9;
	background-color: #f5f7fa;

}

.container {
	margin-top: 15px;
	width: 100%;
	display: flex;
	flex-direction: column;
	height: calc(100% - 82px);
}

.table {
	width: 100%;
	flex: 1;
	height: 100%;
}

.el-table {
	width: 100%;
}

.extra {
	width: 170px;
	height: 80px;

	:deep(.el-textarea__inner) {
		height: 80px;
	}
}
</style>